<template>
    <el-tree
            class="commonTree"
            :data="data"
            :show-checkbox="showCheckbox"
            :node-key="nodeKey"
            :load="loadNode"
            :lazy ="lazy"
            :default-expanded-keys="expandKeyList"
            :default-checked-keys="defaultCheckedKeys"
            :props="defaultProps"
            :expand-on-click-node="expandOnClickNode"
            ref="tree"
            :filter-node-method="filterNode"
            @check-change="change"
            @node-click="handleNodeClick"
        >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <!--<span v-if="node.data.type == 0" class="icon iconfont">&#xe60c;</span>-->
            <!--<span v-if="node.data.type == 1" class="icon iconfont">&#xe60f;</span>
            <span v-if="node.data.type == 2" class="icon iconfont">&#xe611;</span>
            <span v-if="node.data.type > 2" class="icon iconfont">&#xe61b;</span>-->
            <div v-if="node.isLeaf&&leafCls" :class="leafCls"></div>
             <div v-if="!node.isLeaf&&node.expanded&&folderOpenCls" :class="folderOpenCls"></div>
             <div v-if="!node.isLeaf&&!node.expanded&&folderCloseCls" :class="folderCloseCls"></div>
            <el-tooltip placement="top" :disabled="node.data[defaultProps.label].length < 8" :open-delay="500">
                <div slot="content">{{node.data[defaultProps.label]}}</div>
                <span v-if="editId !== node.data.id">{{ node.data[defaultProps.label] }}</span>
            </el-tooltip>
            <el-input :ref="'input-'+node.data.id" v-if="isEdit && editId == node.data.id" v-model="editLabel" @blur="onblur(node)"
                      size="small" style="width:100px;"></el-input>
        <span style="margin-left:100px;" v-if="showButton">
            <template v-if="!isEdit && editId !== node.data.id">
              <el-button
                      type="success"
                      size="mini"
                      icon="el-icon-plus"
                      @click="() => append(data)">
              </el-button>
              <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        @click="() => edit(node)">
              </el-button>
              <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      @click="() => remove(node, data)">
              </el-button>
            </template>
            <template v-if="isEdit && editId == node.data.id">
             <!-- <el-button
                      type="success"
                      size="mini"
                      icon="el-icon-check"
                      @click="() => edit(node)">
              </el-button>
              <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-close"
                      @click="() => remove(node, data)">
              </el-button>-->
            </template>
        </span>
      </span>
    </el-tree>
</template>

<script>
    export default {
        value: String,
        expandKeyList:Array,
        data() {
            return {
                value: '',
                id : 20,
                isEdit: false,
                editId: '',
                editLabel: '',
                currentSelectedId: '',
                currentNodeData: {} ,
                currentNode: {},
                expandKeyList:this.expandedKeys,
            }
        },
        methods: {
            change(val) {
                console.log(val);
                this.$emit('change', val, this.value)
            },

            loadNode(node, resolve) {
//                this.loadTree(node, resolve);
                this.$emit('loadTree', node, resolve);
                console.log(node);
                /* if (node.level === 0) {
                    return resolve([{ label: 'region' }]);
                }
                if (node.level > 1) return resolve([]);

                setTimeout(() => {
                    const data = [{
                        label: 'leaf',
                        leaf: true
                    }, {
                        label: 'zone'
                    }];

                    resolve(data);
                }, 500);*/
            },

            append(data) {
                this.$emit('append',data);
            },

            remove(node, data) {

                this.$emit('remove',node,data);
            },

            edit(node) {
                this.isEdit = true;
                this.editId = node.data.id;
                this.editLabel = node.data[this.defaultProps.label];
            },

            setEdit(){
              if(this.currentSelectedId !== ''){
                  this.isEdit = true;
                  this.editId = this.currentSelectedId;
                  this.editLabel = this.currentNodeData[this.defaultProps.label];
                  console.log(this.currentNodeData)
                  let c = this;
                  console.log('input-'+this.editId);
                  setTimeout(() => {
                      c.$refs['input-'+c.editId].focus();
                  }, 200);

              }else{
                  this['$message']({
                      message: '未选择记录！',
                      type: 'warning'
                  });
              }
            },

            setAppend(record){
                if (! this.currentNodeData.children) {
                    this.$set( this.currentNodeData, 'children', []);
                }
                this.currentNodeData.children.push(record);
            },

            setDelete(){
                console.log(this.currentNode)
                const node = this.currentNode;
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                console.log(children)
                const index = children.findIndex(d => d.id === node.data.id);
                children.splice(index, 1);
                this.currentNode = {};
                this.currentSelectedId = '';
                this.currentNodeData = {};
            },

            onblur(node){
                console.log(node.data.id)
                this.editId = '';
                this.$emit('edit',node,this.editLabel);
                this.editLabel = '';
                this.isEdit = false;
            },

            handleNodeClick(data,node) {
                if(this.currentSelectedId !== data.id) {
                    this.currentSelectedId = data.id;
                    this.currentNodeData = data;
                    this.currentNode = node;
                    console.log('currentSelectedId=' + data.id);
                    this.$emit("node-click", node)
                }
            },

            filterNode(value, data) {
                if (!value) return true;
                return data[this.defaultProps.label].indexOf(value) !== -1;
            },

            filter(val){
                this.$refs.tree.filter(val);
            },

            getCheckedKeys(){
                return this.$refs.tree.getCheckedKeys();
            },

            getCheckedNodes(){
                return this.$refs.tree.getCheckedNodes();
            },

            setCurrentKey(key){
                return this.$refs.tree.setCurrentKey(key);
            },

            /*
                        renderContent(h, {node, data, store}) {
                            return '
                                    <span class="custom-tree-node">
                                        <span>{node.label}</span>
                                        <span style="margin-left:100px;">
                                          <el-button size="mini" type="success" icon="el-icon-add" on-click={() => this.append(data)}></el-button>
                                          <el-button size="mini" type="danger" icon="el-icon-delete" on-click={() => this.remove(node, data)}></el-button>
                                        </span>
                                      </span>';
                        }*/
        },
        watch: {
            searchText(val) {
                console.log(val)
                this.$refs.tree.filter(val);
            },
            expandedKeys(val){
                this.expandKeyList = val;
            }
        },
        props: {
            data: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            expandedKeys: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            defaultCheckedKeys: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            defaultProps: {
                type: [Object, Function],
                default: function () {
                    return {
                        children: 'children',
                        label: 'label',
                        isLeaf: 'leaf'
                    };
                }
            },
            nodeKey: String,
            searchText: String,
            showCheckbox: Boolean,
            lazy: Boolean,
            showButton: Boolean,
            expandOnClickNode:{
                type: Boolean,
                default: true
            },
            folderOpenCls: {
                type: String,
                default: ''
                //default: 'treeFolderOpen'
            },
            folderCloseCls: {
                type: String,
                default: ''
                //default: 'treeFolderClose'
            },
            leafCls: {
                type: String,
                default: ''
                //default: 'treeLeaf'
            },
            /*loadTree:{
                type : Function
            }*/
        }
    }
</script>
